<template>
  <div id="doQuestion">
    <a-row class="grid-demo" :gutter="[24, 24]">
      <a-col :md="12" :xs="24">
        <a-tabs>
          <a-tab-pane key="1">
            <template #title>
              <icon-calendar />
              题目描述
            </template>
            <a-card
              style="min-width: 400px"
              :title="questionVo.title"
              v-if="questionVo"
            >
              <a-descriptions
                title="判题条件"
                :column="{ xs: 1, md: 2, lg: 3 }"
              >
                <a-descriptions-item label="时间限制">
                  {{ questionVo.judgeConfig.timeLimit ?? 0 }}
                </a-descriptions-item>
                <a-descriptions-item label="内存限制">
                  {{ questionVo.judgeConfig.memoryLimit ?? 0 }}
                </a-descriptions-item>
                <a-descriptions-item label="堆栈限制">
                  {{ questionVo.judgeConfig.stackLimit ?? 0 }}
                </a-descriptions-item>
              </a-descriptions>
              <template #extra>
                <a-tag
                  v-for="(tag, index) of questionVo.tags"
                  :key="index"
                  color="green"
                  >{{ tag }}
                </a-tag>
              </template>
              <MdViewer :value="questionVo.content || ''" />
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="2" v-if="questionVo">
            <template #title>
              <icon-clock-circle />
              题解
            </template>
            <MdViewer :value="questionVo.answer || ''" />
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :md="12" :xs="24">
        <a-form :model="form" layout="inline">
          <a-form-item field="language" label="编程语言">
            <a-select
              :style="{ width: '320px' }"
              placeholder="选择编程语言"
              v-model="form.language"
            >
              <a-option>java</a-option>
              <a-option>cpp</a-option>
              <a-option>go</a-option>
            </a-select>
          </a-form-item>
          <a-form-item> 当前仅支持java </a-form-item>
        </a-form>
        <CodeEditor
          :language="form.language"
          :value="form.code"
          :handle-change="onCodeChange"
        />
        <a-divider size="0"></a-divider>
        <a-button type="primary" style="width: 150px" @click="doSubmit"
          >提交
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { QuestionControllerService } from "../../../generated";
import { onMounted, ref } from "vue";
import message from "@arco-design/web-vue/es/message";
import MdViewer from "@/components/MdViewer.vue";
import CodeEditor from "@/components/CodeEditor.vue";

const questionVo = ref();
const route = useRoute();
const form = ref({
  language: "java",
  code:
    "public class Main{\n" +
    "\tpublic static void main(String[] args){\n" +
    "\t\t\n" +
    "\t}\n" +
    "}",
});
//根据id获取脱敏的数据
const getQuestionVo = async () => {
  const id = route.query.id;
  const res = await QuestionControllerService.getQuestionVoByIdUsingGet(
    id as never
  );
  if (res.code === 0) {
    questionVo.value = res.data;
    console.log(questionVo.value);
  } else {
    message.error("加载数据失败," + res.message);
  }
};

onMounted(() => {
  getQuestionVo();
});

const onCodeChange = (val: string) => {
  form.value.code = val;
};

//提交代码吗
const doSubmit = async () => {
  const res = await QuestionControllerService.doQuestionSubmitUsingPost({
    ...form.value,
    questionId: route.query.id as unknown as number,
  });
  if (res.code === 0) {
    message.success("提交成功");
  } else {
    message.error("提交失败," + res.message);
  }
};
</script>

<style></style>
